<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>

    <style>

        /*ul的第一个子元素*/
        ul li:first-child{
            background: coral;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
            background: blueviolet;
        }

        /*
        定位到父元素，选择当前父元素的第一个子元素。
        选择当前 p 元素的父级元素，选中父级元素的第一个子元素，并且是当前类型的元素才生效！（顺序）
        */
        body p:nth-child(1){
            background: aquamarine;
        }

        /*
        选中父元素下的 p类型的子元素。如下，选择第三个：p2。（类型）
        */
        body p:nth-of-type(3){
            background: chartreuse;
        }

        body h2:first-of-type{
            background: cornflowerblue;
        }

        body h2:last-of-type{
            background: gold;
        }

        a:hover{
            background: deeppink;
        }

    </style>

</head>
<body>

<!--    <h1>h1</h1>-->
    <p>pppp</p>

    <h2>1</h2>
    <h2>2</h2>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

    <h2>3</h2>

    <a href="">Ace!</a>

</body>
</html>